<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <script src="__PUBLIC__/js/jquery-1.9.0.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css"/>
    <!--App自定义的css-->
    <link rel="stylesheet" href="__PUBLIC__/css/app.css"/>
    <link rel="stylesheet" href="__PUBLIC__/css/cart.css"/>
</head>
<body ng-app="myApp" ng-controller="cartCtrl" ng-cloak style="height: 100%;">
<!--header-->
<header class="mui-bar mui-bar-nav">
    <a class=" mui-icon mui-icon-left-nav mui-pull-left" style="color: white" href="javascript:void (0)"
       onclick="javascript:history.go(-1)"></a>
    <a class="mui-icon &lt;!--mui-icon-gear--&gt; mui-pull-right" id="cart-edit" ng-click="switch()">编辑</a>
    <h1 class="mui-title">购物车</h1>
</header>

<!--购物车-->
<div class="mui-content cart">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media cart-goods" ng-repeat="pro in cart"><a href="javascript:;">
            <div class="mui-input-row mui-checkbox">
                <input name="checkbox" value="{{pro.id}}" type="checkbox" class="self-checkbox" ng-model="pro.checkbox"
                       ng-click="jisuan();danxuan()"/>
            </div>
            <img class="media-object mui-pull-left" ng-src="{{pro.img}}"/>
            <div class="mui-media-body">
                <span>{{pro.name}}</span>
                <p class="mui-ellipsis"></p>
                <div class="mui-numbox mui-pull-right" data-numbox-min="0">
                    <button class="mui-btn mui-btn-numbox-minus" data-numbox-min="0" type="button"
                            ng-click="pro.num = pro.num -1;jisuan();donum(pro.id, 2, pro.num);">-
                    </button>
                    <input class="mui-input-numbox" type="number" value="{{pro.num}}" ng-model="pro.num"
                           ng-change="jisuan()"/>
                    <button class="mui-btn mui-btn-numbox-plus" type="button" ng-click="donum(pro.id, 1, pro.num);pro.num = pro.num + 1;jisuan();">
                        +
                    </button>
                </div>
                <p></p>

                <p class="mui-ellipsis money">￥<b>{{pro.price}}</b></p>

            </div>
        </a></li>
    </ul>
</div>

<div style="height: 100px">
</div>
<!--结算&删除-->
<div class="cart-total ">
    <ul class="mui-table-view">
        <li class=" mui-media ">
            <div class="mui-input-row mui-checkbox check-all">
                <input name="checkbox" value="Item 1" type="checkbox" id="checkAll" ng-model="checkbox"
                       ng-click="checkall();jisuan()"/>
                <p>全选</p>
            </div>
            <div class="mui-media-body  do-cart" style="display: flex;">
                <p class="money-all">合计:￥<span id="money">{{zong.toFixed(2)}}</span></p>
                <p class="go-deal ungo-deal" id="go-deal" style=" overflow:visible" ng-click="sub()">去下单</p>
            </div>
            <div class="mui-media-body do-del" style="height: 50px;clear:right">
                <button class="mui-btn mui-btn-danger mui-btn-outlined del"
                        style="height: 36px;margin: 7px 10%;width: 80%;" ng-click="del()">删除
                </button>
            </div>
        </li>
    </ul>
</div>
<script src="__PUBLIC__/mui/js/mui.min.js"></script>
<script>
    var app = angular.module("myApp", []);

    app.controller('cartCtrl', function ($scope, $http) {
        $http({
            method: 'GET',
            url: "/index.php/Home/Cart/getCartInfo"
        }).then(function successCallback(response) {
            // console.log(response.data);
            if (response.data.code == -1) {
                layer.msg(response.data.msg)
            } else {
                $scope.cart = response.data.cart;
                $scope.code = response.data.code;
                $scope.zong = 0.00;
                for (var i in response.data.cart) {
                    $scope.cart[i].checkbox = false;
                }
            }
        }, function errorCallback(response) {
        });

        //总价计算
        $scope.jisuan = function () {
            $scope.zong = 0;
            for (var x in $scope.cart) {
                $scope.cart[x].num = Math.ceil($scope.cart[x].num);
                if ($scope.cart[x].num <= 0 || $scope.cart[x].num > 99999) {
                    $scope.cart[x].num = 0;
                }
                if ($scope.cart[x].checkbox == true) {
                    if ($scope.cart[x].num <= 0) {
                        $scope.cart[x].num = 0;
                        $scope.cart[x].checkbox = false;
                    } else {
                        $scope.zong += $scope.cart[x].num * $scope.cart[x].price;
                    }
                }
            }
            if ($scope.zong > 0) {
                $(".go-deal").removeClass("ungo-deal");
            } else if ($scope.zong <= 0) {
                $(".go-deal").addClass("ungo-deal");
            }
        }

        //checkbox选择
        $scope.danxuan = function () {
            var flag = true;
            for (c in $scope.cart) {
                if ($scope.cart[c].num <= 0) {
                    $scope.cart[c].num = 0;
                    $scope.cart[c].checkbox = false;
                }
                if ($scope.cart[c].checkbox == false) {
                    flag = false
                }
            }
            $scope.checkbox = flag;
        }

        //选择全部
        $scope.checkall = function () {
            for (c in $scope.cart) {
                $scope.cart[c].checkbox = $scope.checkbox
            }
        }

        //结算
        $scope.sub = function () {
            layer.confirm('是否去结算？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                var data = new Array();
                var i = 0;
                for (var c in $scope.cart) {
                    if ($scope.cart[c].checkbox == true) {
                        data[i] = $scope.cart[c].id;
                        data[i + 1] = $scope.cart[c].num;
                        i = i + 2;
                    }
                }
                if (i > 0) {
                    $http({
                        method: 'POST',
                        data: {'cart': data},
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest: function (obj) {
                            var str = [];
                            for (var p in obj) {
                                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        url: "/index.php/Home/Cart/toDocart"
                    }).then(function successCallback(response) {
                        if (response.data.code == -1) {
                            layer.msg(response.data.msg, {time: 1000})
                        } else if (response.data.code == 0) {
                            window.location.href = "/index.php/Home/Cart/docart"
                        }
                    }, function errorCallback(response) {
                        errorHandle(response);
                    });
                }
            }, function () {
                layer.msg('已取消');
            })
        }

        //删除
        $scope.del = function () {
            var data = new Array();
            var i = 0;
            for (var c in $scope.cart) {
                if ($scope.cart[c].checkbox == true) {
                    data[i] = $scope.cart[c].id;
                    i++;
                }
            }
            if (i > 0) {
                layer.confirm('是否要删除？', {
                    btn: ['取消', '确认'] //按钮
                }, function () {
                    layer.msg('已取消');
                }, function () {

                    $http({
                        method: 'POST',
                        data: {'cart': data},
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest: function (obj) {
                            var str = [];
                            for (var p in obj) {
                                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        url: "/index.php/Home/Cart/delete"
                    }).then(function successCallback(response) {
                        if (response.data.code == -1) {
                            layer.msg(response.data.msg, {time: 1000})
                        } else if (response.data.code == 0) {
                            layer.msg("删除商品成功", {time: 1000});
                            $(".cart li").find(".self-checkbox").each(function () {
                                $(this).prop("checked") == 1 ? $(this).parents("li").remove() : $(this).prop("checked")
                            })
                            $scope.cart = response.data.data;
                        }
                    }, function errorCallback(response) {
                        errorHandle(response);
                    });
                })
            }
        }

        //增减购物车
        $scope.donum = function (id, type, num) {
            if (id == '' || type == '') {
                return false;
            }
            if (num == 0) {
                return false;
            }
            $http({
                method: 'POST',
                data: {'id': id, 'type':type},
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Cart/donum"
            }).then(function successCallback(response) {
                if (response.data.code == -1) {
                    layer.msg(response.data.msg, {time: 1000})
                } else if (response.data.code == 0) {
                    $scope.cart = response.data.data;
                }
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }

        //切换 编辑/删除购物车
        $scope.switch=function(){
            $("#cart-edit").html()==("编辑")?$("#cart-edit").html("完成"):$("#cart-edit").html("编辑");
            $scope.zong = 0.00;
            $(".cart li").find(".self-checkbox").prop("checked", false);
            $("#checkAll").prop("checked", false);
            for (var c in $scope.cart) {
                $scope.cart[c].checkbox = false
            }
            $(".do-cart").toggle();
            $(".check-all").toggle()
        }
    })


</script>
<!--footer-->

<script src="__PUBLIC__/js/cart.js"></script>
</body>
</html>